<template>
    <view class="page">
        <view class="px-16 py-8">
            <textarea class="textarea" v-model="inputValue" placeholder="请输入您想反馈的问题..." confirm-type="done" maxlength="500"></textarea>
        </view>
        <view class="pa-16">
            <my-button shape="circle" :disabled="loading || isEmpty(inputValue)" :loading="loading" @click="submit">提交反馈</my-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { isEmpty, toast, routerBack } from '@/assets/js/utils';
import { addFeedback } from '@/api/common';

const inputValue = ref('');
const loading = ref(false);
const submit = async () => {
    loading.value = true;
    let [result, err] = await addFeedback({ context: inputValue.value });
    if (result) {
        toast('提交成功，感谢您的反馈');
        setTimeout(() => {
            routerBack();
            loading.value = false;
        }, 600);
    } else {
        loading.value = false;
    }
};
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #f8f8f8;
}
.textarea {
    background-color: #fff;
    width: calc(100% - 32rpx);
    padding: 16rpx;
    border-radius: 16rpx;
}
</style>
